<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/axios.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/elementUI.js"></script>
    <script src="../js/util.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #bbc4cf5e;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>


<body>
<div id="app">
    <el-button @click="goBack" type="warning">返回主页面</el-button>
    <el-button @click="toAdd" type="primary">上传图片</el-button>
    <el-button @click="toCheckAll" type="primary">全选/反选</el-button>
    <el-button type="danger" @click="delAll">批量删除</el-button>
    <el-button type="danger" @click="toMoveAll">批量转移</el-button>

    <el-checkbox-group v-model="uids">
        <el-row :gutter="20">
            <el-col :span="4" v-for="img,i in tableData" style="margin-top: 15px;text-align: center;">
                <div class="grid-content bg-purple">
                    <img :src="img.url" alt="" style="width: 200px;height: 200px">
                    <el-checkbox :label="img.uid">{{''}}</el-checkbox>
                    <el-button type="text" @click="toMove(img.uid)">转移相册</el-button>
                    <el-button type="text" @click="delOne(img.uid)">删除照片</el-button>
                </div>
            </el-col>
        </el-row>
    </el-checkbox-group>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[5, 6, 8, 10]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--上传图片-->
    <el-dialog title="上传图片" :visible.sync="dialogFormVisible" top="2px">
        <el-form :model="form">
            <el-form-item label="请选择" :label-width="formLabelWidth">
                <el-upload
                        action="/upload/uploadLocal.do"
                        list-type="picture-card"
                        :limit="10"
                        multiple
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        :on-success="uploadSuccess"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="uploadImage">确 定</el-button>
        </div>
    </el-dialog>
    <!--转移相册-->
    <el-dialog title="转移图片" :visible.sync="dialogMoveVisible" top="2px">
        <el-form :model="moveForm">
            <el-form-item label="请选择" :label-width="formLabelWidth">
                <el-select v-model="moveForm.movedAlbumId" placeholder="请选择">
                    <el-option
                            v-for="item in albumList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                            :disabled="item.id==id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMoveVisible = false">取 消</el-button>
            <el-button type="primary" @click="moveImage">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            moveForm: {
                albumId: "",//原相册的id；
                toMoveUids: "",//要移动的图片的uid
                movedAlbumId: "",//要移动相册的id；
            },
            albumList: [],
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            id: "",
            album: {},
            uids: [],
            tableData: [],
            databaseData: [],
            total: 0,
            query: {
                //默认显示到第一页
                pageNum: 1,
                pageSize: 5,
                //默认每页显示6条数据（这里的页码6要和分页组件里数组的页码数相对应[6,8,10,15]，
                // 否则分页的页码数会随着数组中第一个值进行分页，不会按照这里的默认值进行分页，
                // 后面的页码会多出分页界面而出现空白页）
                title: "",
            },
            dialogFormVisible: false,
            dialogMoveVisible: false,
            form: {
                id: "",
                imageItems: [],
            },
            formLabelWidth: '120px'
        },
        watch: {
            query: {
                deep: true,
                handler() {
                    this.queryData();
                }
            }
        },
        methods: {
            //上传完成后的返回刷新
            goBack() {
                location.href = "album.html";
            },
            //转移的相册弹窗
            toMove(uid) {
                this.moveForm.toMoveUids = uid;
                this.dialogMoveVisible = true;
            },
            toMoveAll() {
                // console.log(this.uids)
                this.moveForm.toMoveUids = this.uids.join(",");
                this.dialogMoveVisible = true;
            },
            //提交转移相册功能
            moveImage() {
                this.moveForm.albumId = this.id;
                axios.post("/album/moveAlbum.do", this.moveForm).then(res => {
                    this.initMoveFormData();
                    this.initData();
                })
            },
            //moveForm表单的置空
            initMoveFormData() {
                this.moveForm = {
                    albumId: "",
                    toMoveUids: "",
                    movedAlbumId: ""
                }
                this.dialogMoveVisible = false;
            },
            //全选、全不选实现
            toCheckAll() {
                if (this.uids.length == this.tableData.length && this.uids.length > 0) {
                    this.uids = []
                } else {
                    this.uids = this.tableData.map(t => t.uid);
                }
            },
            //多个删除
            delAll() {
                if (this.uids.length > 0) {
                    this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delReal(this.uids.join(","));
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message.error("请选择数据")
                }
            },
            //单个删除
            delOne(uid) {
                this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delReal(uid);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除实现
            delReal(uids) {
                axios.post(`/album/delOne.do?id=${this.id}&uids=${uids}`).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.initData();
                })
            },
            //上传图片
            uploadImage() {
                if (this.form.imageItems.length > 0) {
                    this.form.id = this.id;
                    this.form.imageItems = JSON.stringify(this.form.imageItems);
                    axios.post("/album/updateImage.do", this.form).then(res => {
                        this.initData();
                        this.initFormData();
                    })
                } else {
                    this.$message.error("请选择图片")
                }
            },
            //表单置空
            initFormData() {
                this.dialogFormVisible = false;
                this.fileList = []
                this.form = {
                    id: "",
                    imageItems: [],
                }
            },
            //添加图片的弹窗
            toAdd() {
                this.dialogFormVisible = true;
            },
            //res为服务端返回的值，也就是图片的添加即显
            uploadSuccess(res) {
                let obj = {
                    url: res,
                    uid: new Date().getTime(),
                    status: "success"
                }
                this.form.imageItems.push(obj);
            },
            //上传层中删除图片
            handleRemove(file, fileList) {
                let url = file.response;
                for (let i = 0; i < this.form.imageItems.length; i++) {
                    if (this.form.imageItems[i].url == url) {
                        this.form.imageItems.splice(i, 1);
                        break;
                    }
                }
            },
            //图片即显路径
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //点击事件改变到每页展示几条信息
            handleSizeChange(pageSize) {
                this.query.pageSize = pageSize;
                // this.initData();
            },
            //点击事件跳转到需要的页码数
            handleCurrentChange(pageNum) {
                this.query.pageNum = pageNum;
                // this.initData();
            },
            //
            queryData() {
                // pageNum    pageSize    start    end
                //  1           3          0       3
                //  2           3          3       6
                //  3           3          6       9
                //  n         3    (n-1)*pageSize  n*pageSize
                let start = (this.query.pageNum - 1) * this.query.pageSize;
                let end = this.query.pageNum * this.query.pageSize;
                if (end > this.databaseData.length) {
                    end = this.databaseData.length;
                }
                this.tableData = [];
                this.uids = [];//跳转页面取消全选的按钮设置
                for (let i = start; i < end; i++) {
                    this.tableData.push(this.databaseData[i])
                }
                if (this.tableData.length == 0 && this.query.pageNum > 1) {
                    this.query.pageNum--    //全选删除后刷新页面后退至最后一页
                }
            },
            //展示所有(分页，模糊查询)
            initData() {
                axios.post("/album/findById.do?id=" + this.id).then(res => {
                    this.album = res.data;
                    // this.tableData = JSON.parse(this.album.imageItems);
                    this.databaseData = JSON.parse(this.album.imageItems);//将所有图片数据存起来
                    this.total = this.databaseData.length;//分页要用的总数据量
                    this.queryData();//queryData方法就是给tableData赋值查找当前页数据
                    this.uids = []
                })
            },
            //相册列表信息
            initAlbumData() {
                axios.post("/album/findAll.do").then(res => {
                    this.albumList = res.data;
                })
            }
        },

        //创建后直接加载
        created() {
            this.id = getQueryString("id");
            this.initData()
            this.initAlbumData()
        }
    })
</script>
</body>
</html>